<template>
	<view>
		<!--<z-nav-bar>选班</z-nav-bar>-->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<!-- 公告栏 -->
		<view class="notice-box">
			<uni-notice-bar showIcon single :text="noticeText"></uni-notice-bar>
		</view>
		<view class="classCard" v-for="(item, index) in classData" :key='index'>
			<!-- 单选框 -->
			<view class="header">
				<radio-group @click="radioChange(item.classId, item.className, index)">
					<label class="radio">
						<radio v-if="item.checked" value="1" :checked="item.checked" style="transform:scale(0.7)"/>
						<radio v-else value="0" :checked="item.checked" style="transform:scale(0.7)" />
						<text class="class">{{item.className}}</text>
						
					</label>
				</radio-group>
				<text class="personNum">{{item.selectNum}}/{{item.totalNum}}可选</text>
			</view>
			<view class="row">
				<text>上课校区:</text>
				<text>{{item.campusName}}</text>
			</view>
			<view class="row">
				<text>开课时间:</text>
				<text>{{item.classBeginDate}}</text>
			</view>
			<view class="row">
				<text>上课时段:</text>
				<text>上午</text>
			</view>
			<view class="row">
				<text>开课天数:</text>
				<text>{{item.subjectDays}}天</text>
			</view>
			<view class="row">
				<text>科目:</text>
				<text>{{item.subjectNum}}科</text>
			</view>
			
			 <view class="row">
				<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>
			</view>
			 
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		login
	} from '@/config/login';
	import WXBizDataCrypt from "../../utils/WXBizDataCrypt.js"
	export default {
		components: {

		},
		data() {
			return {
				checked: false,
				radio: 1,
				noticeText: '当前班别剩余选班次数2次',
                classData: []
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(e) {
			console.log(33333)
			this.initClass();
			this.getChoosed()
		},
		onShow() {

		},
		//方法
		methods: {
			onGetPhoneNumber(e){ 
				console.log(e,'getphone')
					if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
						//拒绝授权后弹出一些提示  
					}else{   
						let phoneInfo = {
							data: e.detail.encryptedData,
							aesKey: uni.getStorageSync('sessionKey'),
							iv: e.detail.iv
						}
						
						this.$api.common.aesDecrypt(phoneInfo).then(res => {
							console.log(JSON.stringify(res), 'aesDecrypt')
							
						}) .catch(err => {
							
						})
						
						/*
						var pc = new WXBizDataCrypt('wxd09384b1b8daaf61', uni.getStorageSync('sessionKey'))
						var data = pc.decryptData(encryData, phoneInfo.iv)
						console.log(uni.getStorageSync('sessionKey'), 'un')
						console.log(data, 'data')
						console.log(data, 'data')
						*/
					} 
				},  
			async getChoosed () {
				let userId = this.$store.state.userInfo.userId
				let  res = await this.$api.my.getChoosedClass(userId)
				console.log(res,res)
			},
			async initClass() {
				console.log('8888888888')
				let userId = this.$store.state.userInfo.userId
				this.$api.my.getOptionalClass(userId).then(res => {
					//console.log(JSON.stringify(res.data), 'optionalClass')
					if (res.data && res.data.length  > 0) {
						res.data.forEach((e, i) => {
							res.data[i].checked = false
						})
						this.classData  =  res.data
					}
				}) .catch(err => {
					console.log(err, 'err')
					if(err.statusCode === 0) {
						let msg = err.errMsg
						if(msg.indexOf('【request】') > -1) {
							msg = err.errMsg.substr(err.errMsg.indexOf('】') + 1) 
						}
						console.log(msg,'msg')
						uni.showModal({
							title: '提示',
							content: msg,
							confirmText: '知道了',
							showCancel: false,
							cancelColor: '#81B435',
							success: (res) => {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					}
					
				})
			},
			radioChange(classId, className, index) {
				console.log(this.classData[index].checked, '333')
				this.classData[index].checked = !this.classData[index].checked
				let operateType = this.classData[index].checked ? '选择'  : '取消'
					uni.showModal({
						title: '提示',
						content: '您确认' + operateType + className + '吗？',
						cancelText: '确认',
						confirmText: '我再看看',
						cancelColor: '#81B435',
						success: async (res) => {
							if (res.confirm) {
								console.log('用户点击取消按钮');
								this.classData[index].checked = !this.classData[index].checked
							} else if (res.cancel) {	
								// uni.showToast({
								// 	title: "选班成功",
								// 	icon: "success"
								// });
								let param = {
									studentId: this.$store.state.userInfo.userId,
									classId
								}
								try {
								let res = await this.$api.my.putOptionalClass(param)
								if (res.code == 200) {
									let flag = this.classData[index].checked ? '选班成功' : '取消选班'
									uni.showToast({
										title: flag,
										icon: "success"
									})
								} else {
									this.classData[index].checked = !this.classData[index].checked
									uni.showToast({
										title: '操作失败',
										icon: "none"
									})
								}
								} catch (e) {
									console.log(e,'e')
									this.classData[index].checked = !this.classData[index].checked
									uni.showToast({
										title: '操作失败',
										icon: "none"
									})
								} 
								
							}
						}
					});
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss">
	@import '@/style/mixin.scss';

	page {
		background-color: $uni-bg-color-grey;
	}

	.blue-box {
		height: 150vh;
		background-color: red;
	}

	.classCard {
		margin: 16px auto;
		width: 686upx;
		padding: 24px 16px;
		background: #FEFFFF;
		border-radius: 16px;

		.header {
			padding-bottom: 21px;

			text {
				margin-left: 24upx;
			}

			.personNum {
				text-align: center;
				font-size: 11px;
				line-height: 11px;
				color: #FFFFFF;
				background: #81B435;
				padding: 2px 10px;
				border-radius: 11px;
				margin-left: 40px;
			}
		}

		.row {
			margin-left: 26px;
			color: #969696;
			font-size: 15px;
			line-height: 21px;

			text {
				margin-right: 20px
			}
		}
	}
</style>
